<template>
  <div class="box my">
    <header class="header">
      <van-nav-bar
        left-arrow
        title="我的"
        right-text="设置"
        @click-left="$router.push('/home')"
        @click-right="onClickRight"
      />
    </header>
    <div class="cont" ref="content">
        <van-uploader :after-read="afterRead" :max-size="1024*25" @oversize="oversize">
          <van-image
            round
            width="1rem"
            height="1rem"
            :src="avatar"
          />
          <div class="userName">
            <h4>{{nickName}}</h4>
          </div>
        </van-uploader>
      <van-grid :column-num="5">
        <van-grid-item icon="orders-o" text="全部订单" @click="$router.push('/order?index=0')"/>
        <van-grid-item icon="credit-pay" text="待付款" @click="$router.push('/order?index=1')"/>
        <van-grid-item icon="logistics" text="待收货" @click="$router.push('/order?index=2')"/>
        <van-grid-item icon="credit-pay" text="已完成" @click="$router.push('/order?index=3')"/>
        <van-grid-item icon="cashier-o" text="退换/售后" />
      </van-grid>
      <van-grid :column-num="5">
        <van-grid-item v-for="val in columnList" :key="val.text" :icon="val.icon" :text="val.text" />
      </van-grid>
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
            v-for="item in proList"
            :key="item.proId"
            :num="item.stock"
            :price="item.price"
            :desc="item.introduce"
            :title="item.proName"
            :thumb="item.proImg"
            @click="detail(item.proId)"
          />
        </van-list>
      </van-pull-refresh>
      <van-icon name="back-top" class="backTop" @click="goTop" v-show="fleg" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Uploader, Grid, GridItem, Toast, Image as VanImage, Card, List, PullRefresh } from 'vant'

import { getPresonal, setUserImg, getProColumn, getProPage } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Uploader)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Toast)
Vue.use(VanImage)
Vue.use(Card)
Vue.use(List)
Vue.use(PullRefresh)

export default {
  data () {
    return {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickName: '临时用户',
      columnList: [],
      iconArr: [
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/131663/33/3380/3674/5efbf50fEf79cf314/af4b57d2383e605d.png',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/143365/25/1824/3716/5efbf3c0E5175e1fb/88f6227257a29f1d.png',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/131663/33/3380/3674/5efbf50fEf79cf314/af4b57d2383e605d.png',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png.webp',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/143365/25/1824/3716/5efbf3c0E5175e1fb/88f6227257a29f1d.png',
        'http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png.webp'
      ],
      proList: [],
      loading: false,
      finished: false,
      index: 1,
      isLoading: true,
      fleg: false
    }
  },
  mounted () {
    getPresonal({
      userId: localStorage.getItem('userId')
    }).then(res => {
      // console.log(res.data)
      if (res.data.data.headPhoto) {
        this.avatar = res.data.data.headPhoto
      }
      if (res.data.data.nickName) {
        this.nickName = res.data.data.nickName
      }
    })
    getProColumn().then(res => {
      // console.log(res)
      const arr = res.data.data
      arr.forEach((val, idx) => {
        this.columnList.push({
          icon: this.iconArr[idx],
          text: val
        })
      })
    })
    console.log(this.$refs.content.scrollTop)
    const that = this
    this.$refs.content.addEventListener('scroll', function () {
      if (that.$refs.content.scrollTop >= 500) {
        that.fleg = true
      } else {
        that.fleg = false
      }
    })
  },
  methods: {
    onClickRight () {
      this.$router.push('/setUserMsg')
    },
    afterRead (val) {
      // console.log(val)
      setUserImg({
        userId: localStorage.getItem('userId'),
        userData: {
          headPhoto: val.content
        }
      }).then(res => {
        console.log(res.data)
        this.avatar = res.data.data.headPhoto
        this.nickName = res.data.data.nickName
      })
    },
    oversize () {
      Toast('图片大小不允许超过25K')
    },
    onLoad () {
      getProPage({ index: this.index++, num: 10 }).then(res => {
        this.proList = this.proList.concat(res.data.data)
        this.loading = false
        if (res.data.data.length < 1) {
          this.finished = true
        }
      })
    },
    onRefresh () {
      this.index = 1
      getProPage({ index: 1, num: 10 }).then(res => {
        this.proList = res.data.data
        this.isLoading = false
      })
    },
    goTop () {
      this.$refs.content.scrollTop = 0
    },
    detail (proId) {
      this.$router.push(`/detail/${proId}`)
    }
  },
  beforeRouteEnter (to, from, next) {
    if (localStorage.getItem('isLogin') === 'ok') {
      next()
    } else {
      next('/login?to=' + to.path)
    }
  }
}
</script>

<style lang="scss">
  .my{
    display: flex;
    flex-direction: column;
    .header{
      height: 0.46rem;
    }
    .cont{
      flex: 1;
      overflow: auto;
      .van-uploader{
        margin-top: 0.2rem;
        width: 100%;
        .van-uploader__wrapper{
          width: 100%;
          .van-uploader__input-wrapper{
            width: 100%;
            display: flex;
            justify-content: center;
            .userName{
              align-self: center;
              margin-left: 0.1rem;
            }
          }
        }
      }
    }
    .backTop {
      position: fixed;
      right: 0.1rem;
      bottom: 0.7rem;
      font-size: 50px;
      background-color: #999;
      border-radius: 10px;
      opacity: 0.5;
    }
  }
</style>
